//结算管理页面中的结算详情

//付费方式页面
import React,{Component} from 'react'
import {Modal, Form ,Input,Select ,Icon,Divider , InputN} from 'antd'
import Button from '../button/button'
import $ from 'jquery'
import * as tools from '../../tools/tools'
const Option = Select.Option
const FormItem = Form.Item;

let uuid = 0;
class Settlement extends Component{
    constructor(props){
        super(props)
        this.state={
            fristmoney:''
        }
    }

    add = () => {
        const { form } = this.props;
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(uuid);
        uuid++;
        form.setFieldsValue({
          keys: nextKeys,
        });
      }
    remove = (k) => {
        const { form } = this.props;
        const keys = form.getFieldValue('keys');
        if (keys.length === 1) {
            return;
        }
        form.setFieldsValue({
            keys: keys.filter(key => key !== k),
          });
    }
    handleSubmit = (e) => {        // from点击确认提交产生的数据
        this.props.form.validateFields((err, values) => {
            if (!err) {
              let allot=[];
              let datasource = {};
              for(let i in values){
                  i.match(/^allot/) ? allot.push(values[i]):false;
              }
              datasource.allot = allot;
              datasource.id = this.props.settlecontent[0].id
              datasource.payment_mode = values.payment_mode
              datasource.payment_part = parseInt(values.payment_part)*100
              datasource.is_refillings = 'no';
              datasource.payment_type = values.payment_type;
              datasource.token = localStorage.token
              if(this.props.form.getFieldValue('payment_mode') == 3){
                  datasource.payment_profit = parseInt(values.payment_profit)*100
                  datasource.payment_surplus = parseInt(values.payment_surplus)*100
              }
              tools.loginView(this).then(
              $.ajax({
                  type:'POST',
                  url: tools.apiUrl + 'agency/settlement_operation',
                  data:datasource,
                  success:(res)=>{
                      console.log(res)
                    //   $.ajax({
                    //       url:tools.apiUrl+
                    //   })
                      
                    this.props.form.resetFields();
                    this.props.onCancel();
                  }
              })
            )
            }
        });
    }
    fristmoney=(e)=>{
        this.setState({
            fristmoney:e.target.value
        })
    }
    Settlecancel=()=>{
        this.props.onCancel();
        this.props.form.resetFields();
    }

    render(){
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const cancelbtn={
            // float:'right',
            position:'absolute',
            bottom: 0,
            right: 0,
            width:'88px',
            height:'30px',
            color:'#fff',
            background: '#4C8EDB',
            borderRadius: '4px'
        }
        getFieldDecorator('keys', { initialValue: [] });
        const keys = getFieldValue('keys');
        const formItems = keys.map((k, index) => {
            return (
              <FormItem
                key={k}
              >
                {keys.length > 1 ? (
                    <Icon
                        className="dynamic-delete-button"
                        type="minus-circle-o"
                        disabled={keys.length === 1}
                        onClick={() => this.remove(k)}
                    />
                    ) : null}

                    {getFieldDecorator(`allot${k}[role]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Input  style={{ width: 100,marginLeft:10 }} placeholder="角色"/>
                    )}

                    {getFieldDecorator(`allot${k}[money]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Input  style={{ width: 100,marginLeft:30 }} placeholder="金额"/>
                    )}
                
                    {getFieldDecorator(`allot${k}[type]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Select  style={{ width: 100,marginLeft:30 }}>
                            <Option  value="1">平台收入</Option>
                            <Option  value="2">其他收入</Option>
                        </Select>
                    )}

                    {getFieldDecorator(`allot${k}[cash_name]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Input  style={{ width: 100 ,marginLeft:30}} placeholder="收款人"/>
                    )}

                    {getFieldDecorator(`allot${k}[cash_card]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Input  style={{ width: 150 ,marginLeft:30}} placeholder="收款账号"/>
                    )}

                    {getFieldDecorator(`allot${k}[cash_bank]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Input  style={{ width: 150 ,marginLeft:30}} placeholder="收款银行"/>
                    )}
              </FormItem>
            );
          });

        return(
             <Modal title="结算方式" className="modal_box"
                visible={this.props.show}
                maskClosable={false}
                footer={null}
                onCancel={this.Settlecancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}>
                <div style={{width:'100%',height:'100%',position:'relative'}}>
                    <Form onSubmit={this.handleSubmit} >
                
                        <div>
                            <div style={{fontWeight:"bold",fontSize:"16px"}}>付款信息</div>
                            <Divider />
                            <div className="method_payment">
                                <div>付款方式</div>
                                <div>
                                  <FormItem>
                                    {getFieldDecorator('payment_mode', {
                                      validateTrigger: ['onChange', 'onBlur'],
                                      rules: [{
                                          required:true,
                                          whitespace: true
                                      }],
                                      initialValue:'3'
                                      })(
                                          <Select style={{width:'200px'}} >  
                                              <Option value="3">部分付款</Option>  
                                              <Option value="4">结清</Option>  
                                          </Select>   
                                    )}
                                  </FormItem>
                                </div>                  
                            </div>
                            <div className="method_payment">
                            <div>付款金额</div>
                            {this.props.form.getFieldValue('payment_mode') == 3 ?
                            (
                                <div className="payment_center">
                                    <FormItem>
                                    付款
                                    {getFieldDecorator('payment_part', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message:' '
                                        }],
                                        initialValue:this.state.fristmoney
                                        })(
                                            <Input  style={{ width:"80px"}} onChange={this.fristmoney} />
                                        )}
                                        元，收益达
                                    </FormItem>
                                    <FormItem>
                                    {getFieldDecorator('payment_profit', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message:' ',
                                            validator:this.maxmoney     //收益的钱不能超过所有剩余的钱
                                        }],
                                        })(
                                            <Input   style={{width:"80px"}} />      
                                        )}
                                        元后，补齐余下的
                                    </FormItem>
                                    <FormItem>
                                    {getFieldDecorator('payment_surplus', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        initialValue:this.props.settlecontent?this.props.settlecontent[0].payment_surplus-this.state.fristmoney:false
                                        })(
                                            <Input   style={{width:"80px"}}  disabled />
                                        )}
                                        元
                                        
                                    </FormItem>                 
                              
                                </div>
                                ):(<FormItem>
                                    {getFieldDecorator('payment_part', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        initialValue:this.props.settlecontent?this.props.settlecontent[0].payment_surplus:false            //这里反复选择有bug
                                        })(
                                            <Input  style={{ width:"100px"}} disabled/>
                                        )} 元
                                    </FormItem>)}
                            
                                                 
                            </div>
                            <div className="method_payment">
                                <div>付款类型</div>
                                <div>
                                    {this.props.settlecontent?(this.props.settlecontent[0].payment_type ==1 ?<FormItem>
                                    {getFieldDecorator('payment_type', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            
                                        }],
                                        initialValue:'1'
                                        })(
                                            <Select style={{width:'200px'}} disabled>  
                                                <Option value="1">正常付款</Option>  
                                            </Select>  
                                        )}
                                    </FormItem> :
                                    this.props.form.getFieldValue('payment_mode') == 3 ?
                                    <FormItem>
                                    {getFieldDecorator('payment_type', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message:'请选择付款类型'
                                        }],
                                        
                                        })(
                                            <Select style={{width:'200px'}}>  
                                                <Option value="1">尾款</Option>  
                                                <Option value="2">定金</Option>  
                                            </Select>  
                                        )}
                                    </FormItem>:
                                    <FormItem>
                                    {getFieldDecorator('payment_type', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true
                                        }],
                                        initialValue:'1'
                                        })(
                                            <Select style={{width:'200px'}}>  
                                                <Option value="1">尾款</Option>  
                                                <Option value="2">定金</Option>  
                                            </Select>  
                                        )}
                                    </FormItem>):false}
                                  
                                </div>                  
                            </div>
                        </div>
{/*付款类型为尾款时才显示下面的收益分配*/}
                            {this.props.form.getFieldValue('payment_type') ==1 ?<div style={{marginTop:'30px'}}>
                            <div style={{fontWeight:"bold",fontSize:"16px"}}>收益分配</div>
                            <Divider />
                            <div  className="method_profit">
                                <div>
                                    <div style={{ width: 100 ,marginLeft:10}}>角色</div>
                                    <div style={{ width: 100 ,marginLeft:30}}>金额</div>
                                    <div style={{ width: 100 ,marginLeft:30}}>类型</div>
                                    <div style={{ width: 100 ,marginLeft:30}}>收款人</div>
                                    <div style={{ width: 150 ,marginLeft:30}}>收款账户</div>
                                    <div style={{ width: 150 ,marginLeft:30}}>收款银行</div>
                                </div>
                                {formItems}
                                <Icon type="plus" onClick={this.add}/>
                            </div>
                        </div>:false}
                    </Form>
                    <Button onClick={this.handleSubmit} htmlType="submit" datastyle={cancelbtn}>确认</Button>
                </div>
            </Modal>
        )
    }
}
const WrappedSettlement = Form.create()(Settlement);

export default WrappedSettlement